<template>
  <article class="container">
    <search-form ref="searchForm" :form="search" @fetchData="fetchData">
      <FormItem prop="email">
        <Input type="text" v-model="search.email" placeholder="账号关键字" />
      </FormItem>
      <FormItem prop="name">
        <Input type="text" v-model="search.name" placeholder="昵称关键字" />
      </FormItem>
    </search-form>
    <article class="table-data">
      <Table :columns="columns" :data="list">
        <template #role="{ row }">
          <strong>{{ row.role.name }}</strong>
        </template>
        <template #action="{ row }">
          <rp-button icon="Icon-edit" text="修改" code="admin-opera" type="warning" @click="toPathLink('/admin/edit/' + row.id)"/>
          <rp-button icon="Icon-close" text="删除" code="admin-del" type="danger" @click="handleDel(row.id)"/>
        </template>
      </Table>
      <pagination :page="page" @on-change="fetchData"/>
    </article>
  </article>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import util from "@/libs/util";
import searchForm from '@/components/common/searchForm.vue'
import pagination from '@/components/common/pagination.vue'
import admin from "@/api/admin";

export default {
  name: 'index',
  components: {
    pagination,
    searchForm
  },
  data() {
    return {
      search: {
        email: '',
        name: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Email',
          key: 'email'
        },
        {
          title: 'Role',
          slot: 'role'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
    };
  },
  computed: {
    ...mapState({
      list: state => state.admin.list,
      page: state => state.admin.page,
    })
  },
  mounted() {
    this.$refs.searchForm.handleSearch();
  },
  methods: {
    ...mapActions(['getAdminList']),
    // 查询
    fetchData() {
      this.getAdminList({include: 'role'});
    },
    // 删除
    handleDel(id) {
      util.confirm('是否确认删除？', () => {
        console.log(123);
        admin.delete(id).then(() => {
          util.success('操作成功');
          this.fetchData();
        });
      })
    },
    // 跳转
    toPathLink(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
